<template>
	<view>
		<view class="centent">
			<view class="navcentent" v-if="gglist.length>0" @tap="tokebiaoxiangqing(item.id)"
				v-for="(item,index) in gglist " :key="index">
				<view class="active">
					<view class="toptitle">
						<view class="big"><text>{{item.title}}</text></view>
						<view class="xiaobt"><text>{{item.class_name}}</text></view>
					</view>
					<view class="bottomtitle">
						<view><text style="font-size: 28rpx;font-weight: bold;">本周工作重点</text></view>
						<view style="overflow: hidden;">
							<rich-text class="wenziboxcenter" style="font-size: 24rpx;" :nodes="item.work_center">
							</rich-text>
							<!-- <text class="wenziboxcenter">中新网4月30日电 据美国中文网报道，当地时间29日，美国前总统特朗普接受福克斯新闻专访时，针对现任总统拜登的政策进行了批评，并继续为自己在2024年参选造势。他还透露，现任佛罗里达州州长罗恩德桑蒂斯可能会成为他的竞选搭档。</text> -->
						</view>
					</view>
				</view>

			</view>

		</view>
		<kongyemian v-if="gglist.length<1" :isLoding="loding" type="kebiao"></kongyemian>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				// parentId: state => state.user.parentId,
				isLogin: state => state.user.isLogin
			})
		},
		data() {
			return {
				class_id: 0,
				gglist: [],
				loding:true

			}
		},
		methods: {
			tokebiaoxiangqing(id) {
				uni.navigateTo({
					url: '../kebiaoxiangqing/kebiaoxiangqing?id=' + id
				})
			},
			kebiaolistshow() {
				this.loding = true
				this.$store
					.dispatch('kebiaolist', {
						class_id: this.class_id,
						token: this.userInfo.token


					})
					.then(res => {						
						this.gglist = res.data.data;
						this.loding = false
					});
			}

		},
		onLoad(data) {
			this.class_id = data.class_id
			this.kebiaolistshow()
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.kebiaolistshow()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	.centent {
		background-image: url(../../static/keding.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		padding-top: 60rpx;

		.navcentent {
			width: 100%;
			height: 410rpx;
			padding: 20rpx 50rpx;
			box-sizing: border-box;

			.active {
				width: 100%;
				height: 100%;
				background-color: #fff;
				border-radius: 15rpx;
				box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.toptitle {
					// position: relative;
					// flex: 1;					
					height: 115rpx;
					width: 100%;
					background-color: #5bb9f8;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					// align-items: center;
					color: #fff;
					font-size: 35rpx;
					overflow: hidden;

					.big {
						text-align: center;
					}

					.xiaobt {
						// position: absolute;
						// right: 30rpx;
						// bottom: 4rpx;
						font-size: 28rpx;
						text-align: right;
						margin-right: 30rpx;
					}

				}

				.bottomtitle {
					// flex: 2;
					height: 275rpx;
					overflow: hidden;
					width: 100%;
					padding: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					box-sizing: border-box;

					.wenziboxcenter {
						font-size: 24rpx;
						display: -webkit-box;
						width: 100%;												
					    text-overflow: ellipsis;						
						overflow: hidden;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
												
						
					}

				}
			}
		}
	}
</style>
